<template>
  <div  class="app-container myMaintain">
    <el-form :model="selectForm" ref="queryForm" :inline="true" label-width="100px">
      <el-form-item label="所属公司">
        <treeselect style="width: 199px;height: 32px" v-model="selectForm.deptId" :options="company"
                    placeholder="请选择所属公司"/>
      </el-form-item>
      <el-form-item label="设备名称">
        <el-input v-model="selectForm.devicesName" placeholder="请输入设备名称" clearable size="small" />
      </el-form-item>
      <el-form-item label="设备编号">
        <el-input v-model="selectForm.devicesId" placeholder="请输入设备编号" clearable size="small" />
      </el-form-item>
      <el-form-item label="维修编号">
        <el-input v-model="selectForm.oddNumber" placeholder="请输入维修编号" clearable size="small" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select size="small" v-model="selectForm.repairsState" placeholder="请选择" clearable>
          <el-option
            v-for="item in status"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="维修时间">
        <el-date-picker
          size="small"
          v-model="selectDate"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="dateChange"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" icon="el-icon-search" @click="selectForm.pageNum=1;getList();">搜索</el-button>
        <el-button size="mini" type="warning" icon="el-icon-download">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" ref="singleTable" :data="list" stripe border >
      <el-table-column align="center" type="index" label="序号" width="55"/>
      <el-table-column align="center" label="维修单号" width="150"  prop="oddNumber">
        <template slot-scope="scope">
          <div class="bule"  @click="details(scope.row)">{{scope.row.oddNumber}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备编号" width="150"  prop="deviceCode">
        <template slot-scope="scope">
          <div class="bule"  @click="deviceDetails(scope.row)">{{scope.row.deviceCode}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设备名称" prop="devicesName" show-overflow-tooltip/>
      <el-table-column label="报障时间" align="center" prop="theRepairTime" width="170">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.theRepairTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="报修人" prop="repairsUserName" show-overflow-tooltip/>
      <el-table-column align="center" label="故障内容" property="repairsDescribe" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" label="状态" prop="repairsState" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="status roseRed" v-if="scope.row.repairsState==1">待分派</div>
          <div class="status orange" v-if="scope.row.repairsState==2">已分派</div>
          <div class="status blue" v-if="scope.row.repairsState==3">维修中</div>
          <div class="status green" v-if="scope.row.repairsState==4">验收通过</div>
          <div class="status cyan" v-if="scope.row.repairsState==5">撤销</div>
          <div class="status gray" v-if="scope.row.repairsState==6">验收不通过</div>
          <div class="status purple" v-if="scope.row.repairsState==7">已解决</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="处理人" prop="responsibleUserName" show-overflow-tooltip/>
      <el-table-column label="操作" align="center" width="200" fixed="right">
        <template slot-scope="scope">
            <el-button size="mini" v-if="scope.row.repairsState==3" type="primary" class="btnCyan" icon="el-icon-plus" @click="dispose(scope.row)">处理</el-button>
            <el-button size="mini" v-if="scope.row.repairsState==2" type="primary" class="btnBlue" icon="el-icon-plus" @click="jiedan(scope.row)">开始</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page.sync="selectForm.pageNum"
      :limit.sync="selectForm.pageSize"
      @pagination="getList"
    />
    <equipment-des v-if="isDes" @subSetChane="subSetChane" :pid="pid"></equipment-des>
    <repairwork-des v-if="isRDes" @subSetChane="subRSetChane" :pid="rid"></repairwork-des> 
    <dispose v-if="isAdd" @subSetChane="addRSetChane" :info="info"></dispose>
  </div>
</template>

<script>
  import {treeselect} from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {reportRepairList,reportRepairChange} from '@/api/repair/index'
  import Cookies from 'js-cookie'
  import equipmentDes from '@/views/components/equipmentDetails'
  import repairworkDes from '@/views/maintain/repairWorkOrder/repairWorkOrderDetail'
  import dispose from './dispose'
  export default {
    components: {
      Treeselect,
      equipmentDes,
      repairworkDes,
      dispose
    },
    name: "myMaintain.vue",
    data() {
      return {
        selectForm: {
          pageNum: 1,
          pageSize: 10,
          state:2,
        },
        company:[],
        loading: false,//加载
        list: [],//数据
        total: 0,
        selectDate: '',//时间
        status:[
          {
          id:'1',
          name:'待分派',
        },{
          id:'2',
          name:'已分派',
        },{
          id:'3',
          name:'维修中',
        },{
          id:'4',
          name:'已验收通过',
        },{
          id:'5',
          name:'验收通过',
        },{
          id:'6',
          name:'撤销',
        },
        {
          id:'7',
          name:'已解决',
        }],
        redeployDialog:false,
        revocationDialog:false,
        revocaData:'',

        isDes: false,
        pid: null,
        isRDes: false,
        rid: null,
        isAdd: false,
        info: null
      }
    },

    created() {
      this.getTree()
      this.getList()
    },
    methods: {
      //所属部门下拉
      getTree() {
        treeselect().then(response => {
          this.company = response.data;
        });
      },
      getList() {
        reportRepairList(this.selectForm).then((res)=>{
          this.list=res.rows
          this.total=res.total
        })
      },
      //更改时间
      dateChange() {
        this.selectForm.theRepairStartTime = this.selectDate&&this.selectDate[0]||null
        this.selectForm.theRepairEndTime = this.selectDate&&this.selectDate[1]||null
      },
      //处理
      dispose(row){
        // this.$router.push({path:'/maintain/dispose',query:{id:row.id,odd:row.oddNumber}})
        this.info={odd:row.oddNumber,id:row.id}
        this.isAdd=true
      },
      addRSetChane(info){
        this.isAdd=false
        this.info=null
        if(info) this.getList()
      },
      //接单
      jiedan(row){
        this.$confirm('确认接单吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          reportRepairChange({
            oddNumber:row.oddNumber,
            responsibleUserId:row.responsibleUserId,
            type:3
          }).then((res)=>{
            if(res.code==200){
              this.$message.success(res.msg)
              this.getList()
            }
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //维修单号详情
      details(row){
        // this.$router.push({path:'/maintain/repairWorkOrderDetail',query:{id:row.id}})
        this.rid=row.id
        this.isRDes=true
      },
      subRSetChane(){
        this.isRDes=false
        this.rid=null
      },
      //设备编号详情
      deviceDetails(row){
        // this.$router.push({path:'/maintain/repairWorkOrderDetailD',query:{data:row}})
        // this.$router.push({ path: '/equipmentGL/equipmentDetails', query: { data: row.devicesId } })

        this.pid=row.devicesId
        this.isDes=true
      },
      subSetChane(){
        this.isDes=false
        this.pid=null
      },
    }
  }
</script>

<style lang="scss">
  .myMaintain {
    .bule{
      color:#2196F3;
      cursor: pointer;
    }
    .status {
      color: white;
      padding: 0 7px;
      min-width: 54px;
      height: 22px;
      display: inline-block
    }

    .red {
      background: red;
    }

    .blue {
      background: #0070c0;
    }

    .camBlue {
      background: #8db3e2;
    }

    .yellow {
      background: yellow;
    }

    .purple {
      background: purple;
    }

    .orange {
      background: orange;
    }

    .green {
      background: yellowgreen;
    }

    .gray {
      background: gray;
    }

    .cyan {
      background: #66C9B7;
    }

    .roseRed {
      background: orchid;
    }

    .btnCyan {
      background: #66C9B7;
      border: 1px solid #66C9B7
    }
    .btnBlue {
      background: #8db3e2;
      border: 1px solid #8db3e2
    }
    .checkAccept {
      .is-checked {
        .el-radio__label, .el-checkbox__label {
          color: #05A380;
        }
        .el-checkbox__input.is-checked .el-checkbox__inner, .el-radio__input.is-checked .el-radio__inner {
          background-color: #05A380;
          border-color: #05A380;
        }
      }
      .grade {
        margin: 15px 0 0;
        i {
          font-size: 20px;
        }
      }
      .explain {
        margin-top: 15px;
        .el-textarea {
          margin: 10px 0;
        }
      }
      .image{
        margin-top:10px;
        .h4{
          display: inline-block;
          margin-bottom: 10px;
        }
      }
      .h4 {
        line-height: 20px;
        color: #05A380;
        font-weight: bold;
        font-size: 16px;
        padding-right: 10px;
      }

    }
  }
</style>
